<template>
	<view class="page page-fill">
		<view class="linearBg"></view>
		<view class="header">
			<view class="hdLeft">
				<view class="userPhoto">
					<image src="../../static/img/me/nantx.png" class="face"></image>
				</view>
				<view class="info-wapper">
					<view class="nickname">{{accountInfo.nickName || '未登录'}}</view>
					<view class="nav-info">介绍一下自己吧</view>
				</view>
			</view>
			<view class="hdRight">
				<!-- <button type="primary" class="btn">签到</button> -->
				<button type="primary" class="btn" v-if="!accountInfo" @click="login">登录</button>
			</view>
		</view>
		<view class="userInfo">
			<view class="list">
				<view class="val">0</view>
				<view class="tit">我的金币</view>
			</view>
			<view class="list">
				<view class="val">0</view>
				<view class="tit">今日金币</view>
			</view>
			<view class="list">
				<view class="val">0<text class="unit">分钟</text></view>
				<view class="tit">今日阅读时长</view>
			</view>
			<view class="list">
				<view class="val">0<text class="unit">分钟</text></view>
				<view class="tit">累计阅读时长</view>
			</view>
		</view>
		<view class="navContainer">
			<uni-list>
				<uni-list-item thumb="../../static/img/icon/bookshelf.png" showArrow title="我的书架" clickable @click="gotoshujia" />
				<uni-list-item thumb="../../static/img/icon/reply.png" showArrow title="问题反馈" />
			</uni-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		computed: {
			accountInfo(){
				let userInfo = this.$store.state.userInfo;
				return userInfo;
			}
		},
		onLoad(){
			// this.getInfo();
			console.log(this.accountInfo)
		},
		methods: { 
			gotoshujia(){
				uni.switchTab({
					url:'../bookshelf/bookshelf'
				});
			},
			getInfo(){
				
			},
			login(){
				uni.navigateTo({
					url: '/pages/login/login',
				});
			},
		}
	}
</script>

<style scoped lang="scss">
.page{
	position: relative;
	.linearBg{
		width: 100%;
		height: 420rpx;
		background: linear-gradient(180deg, #fff 0%, rgba(250,250,250,0) 100%);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
}
.header{
	position: relative;
	padding: 20rpx 24rpx;
	z-index: 9;
	.hdLeft{
		display: flex;
		.userPhoto{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 16rpx;
			.face{
				width: 100%;
				height: 100%;
			}
		}
		.info-wapper{
			flex: 1;
			padding-top: 12rpx;
			.nickname{
				font-size: 40rpx;
				font-weight: 500;
				color: #111111;
				line-height: 48rpx;
			}
			.nav-info{
				font-size: 30rpx;
				font-weight: 400;
				color: #B3B3B3;
				line-height: 38rpx;
			}
		}
	}
	.hdRight{
		position: absolute;
		right: 24rpx;
		bottom: 36rpx;
		.btn{
			width: 104rpx;
			height: 48rpx;
			line-height: 48rpx;
			font-size: 24rpx;
			background: #FF836F;
			border-radius: 8rpx;
			color: #fff;
			&::after{
				display: none;
			}
		}
	}
}
.userInfo{
	display: flex;
	vertical-align: middle;
	justify-content: center;
	margin: 0 24rpx;
	background: #FFF;
	border-radius: 16rpx;
	padding: 20rpx 0 20rpx;
	z-index: 9;
	position: relative;
	.list{
		flex: 1;
		text-align: center;
		.val{
			height: 46rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #111;
			line-height: 46rpx;
			.unit{
				color: #999;
				font-size: 24rpx;
			}
		}
		.tit{
			margin-top: 10rpx;
			font-size: 22rpx;
			font-weight: 400;
			color: #666666;
			line-height: 32rpx;
		}
	}
}
.navContainer{
	margin: 24rpx 24rpx 0;
	background: #FFF;
	border-radius: 16rpx;
	z-index: 9;
	position: relative;
	/deep/ .uni-list{
		.uni-list--border-top,.uni-list--border-bottom{
			display: none;
		}
		.uni-list--border{
			left: 72rpx;
		}
		.uni-list-item__header{
			.uni-list-item__icon-img{
				margin: 0;
			}
		}
	}
}
</style>
